<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />
  <title>1-1 Vue实例</title>
  <script src='../lib/vue.global.js'></script>
</head>
<body>
<div id='app'>
  {{msg}}
  <button-component></button-component>
  <button-component></button-component>
  <my-component-a></my-component-a>
</div>
<script type='text/javascript'>
  // 局部组件
  const myComponentA = {
    data() {
      return {
        str: 'inner a'
      }
    },
    template: '<h2>{{ str }}</h2>'
  }

  const app = Vue.createApp({
    data() {
      return {
        msg: 'hello world'
      }
    },
    components: {
      'my-component-a': myComponentA
    }
  })
  // 全局组件
  app.component('button-component', {
    data() {
      return {
        str: 'btn'
      }
    },
    template: '<button>I am a {{ str }}</button>'
  })

  app.mount('#app')
</script>
</body>
</html>
